<div fxLayout="column" class="VcsManager">
    <div fxFlex="none" fxLayout fxLayoutAlign="space-between center" class="VcsManager__title">
        <h1>Version Control</h1>
        <div class="VcsManager__tools">
            <button (click)="syncWorkspace()" gd-icon-button aria-label="Sync workspace"
                    id="vcs-sync-workspace-button">
                <gd-icon *ngIf="!workspaceSynchronizing" name="refresh"></gd-icon>
                <gd-spinner *ngIf="workspaceSynchronizing"></gd-spinner>
            </button>
        </div>
    </div>

    <gd-tab-group [tabControl]="tabControl"></gd-tab-group>

    <gd-vcs-sync-message-box
        *ngIf="!syncResultMessageDismissed"
        (dismiss)="dismissSyncResultMessage()"
        [processing]="workspaceSynchronizing"
        [type]="syncResultMessageType"
        [successResult]="syncWorkspaceResult"
        [errorMessage]="syncWorkspaceErrorMessage"
        class="VcsManager__syncResultMessage"></gd-vcs-sync-message-box>

    <!-- Changes Tab -->
    <div fxFlex="1 1 auto" fxLayout="column"
         [class.VcsManager__tabContent--hidden]="tabControl.activateTab.value !== 'gd-vcs-manager-changes'"
         class="VcsManager__tabContent">
        <div fxLayout fxFlex="1 1 auto" class="VcsManager__itemsContainer">
            <div #itemList class="VcsManager__itemList"></div>
            <div class="VcsManager__itemListEmptyState"></div>
        </div>

        <div fxFlex="none" fxLayout fxLayoutAlign="space-between center" class="VcsManager__actionbar">
            <gd-checkbox [formControl]="allSelectCheckboxFormControl"
                         [indeterminate]="allSelectCheckboxIndeterminate">
                {{ selectedFileChangesCount | number }} item(s)
            </gd-checkbox>
            <button gd-button color="primary" [disabled]="selectedFileChangesCount === 0"
                    class="VcsManager__commitButton" (click)="openCommitDialog()">Commit</button>
        </div>
    </div>

    <!-- History Tab -->
    <div fxFlex="1 1 auto" fxLayout="column"
         [class.VcsManager__tabContent--hidden]="tabControl.activateTab.value !== 'gd-vcs-manager-history'"
         class="VcsManager__tabContent">
        <div fxLayout="column" fxFlex="1 1 auto" gdInfiniteScroll (scrolled)="loadMoreCommitHistory()"
             class="VcsManager__history">
            <gd-vcs-commit-item
                *ngFor="let commitItem of commitItems | async"
                [commitItem]="commitItem"></gd-vcs-commit-item>
        </div>
    </div>
</div>
